{% extends "templates/web.html" %}

{% macro email_login_body() -%}
{% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
<div class="page-card-body">
	<div class="form-group">
		<label class="form-label sr-only" for="login_email">{{ login_label or _("Email")}}</label>
		<div class="email-field">
			<input type="text" id="login_email" class="form-control"
				placeholder="{% if login_name_placeholder %}{{ login_name_placeholder  }}{% else %}{{ _('jane@example.com') }}{% endif %}"
				required autofocus autocomplete="username">

			<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
				xmlns="http://www.w3.org/2000/svg">
				<use class="es-lock" href="#es-line-email"></use>
			</svg>
		</div>
	</div>

	<div class="form-group">
		<label class="form-label sr-only" for="login_password">{{ _("Password") }}</label>
		<div class="password-field">
			<input type="password" id="login_password" class="form-control" placeholder="•••••"
				autocomplete="current-password" required>

			<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
				xmlns="http://www.w3.org/2000/svg">
					<use class="es-lock" href="#es-line-lock"></use>
			</svg>
			<span toggle="#login_password" class="toggle-password text-muted">{{ _('Show') }}</span>
		</div>
	</div>

	<p class="forgot-password-message">
		<a href="#forgot">{{ _("Forgot Password?") }}</a>
	</p>
</div>
{% endif %}
<div class="page-card-actions">
	{% if not disable_user_pass_login %}
	<button class="btn btn-sm btn-primary btn-block btn-login" type="submit">
		{{ _("Login") }}</button>
	{% endif %}
	{% if ldap_settings and ldap_settings.enabled %}
	<button class="btn btn-sm btn-default btn-block btn-login btn-ldap-login">
		{{ _("Login with LDAP") }}</button>
	{% endif %}
</div>
{% endmacro %}

{% block head_include %}
{{ include_style('login.bundle.css') }}
{% endblock %}

{% macro logo_section(title=null) %}
<div class="page-card-head">
	<img class="app-logo" src="{{ logo }}">
	{% if title %}
	<h4>{{ _(title)}}</h4>
	{% else %}
	<h4>{{ _('Login to {0}').format(app_name or _("Frappe")) }}</h4>
	{% endif %}
</div>
{% endmacro %}

{% block page_content %}
<!-- {{ for_test }} -->
<div>
	<noscript>
		<div class="text-center my-5">
			<h4>{{ _("Javascript is disabled on your browser") }}</h4>
			<p class="text-muted">
				{{ _("You need to enable JavaScript for your app to work.") }}<br>{{ _("To enable it follow the instructions in the following link: {0}").format("<a href='https://enable-javascript.com/'>enable-javascript.com</a></p>") }}
		</div>
	</noscript>
	<section class='for-login'>
		{{ logo_section() }}
		<div class="login-content page-card">
			<form class="form-signin form-login" role="form">
				{%- if social_login or login_with_email_link -%}
				<div class="page-card-body">
					<form class="form-signin form-login" role="form">
						{{ email_login_body() }}
					</form>
					<div class="social-logins text-center">
						{% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
						<p class="text-muted login-divider">{{ _("or") }}</p>
						{% endif %}
						<div class="social-login-buttons">
							{% for provider in provider_logins %}
							<div class="login-button-wrapper">
								<a href="{{ provider.auth_url }}"
									class="btn btn-block btn-default btn-sm btn-login-option btn-{{ provider.name }}">
									{% if provider.icon %}
										{{ provider.icon }}
									{% endif %}
									{{ _("Login with {0}").format(provider.provider_name) }}</a>
							</div>
							{% endfor %}
						</div>
						{% if login_with_email_link %}
						<div class="login-with-email-link social-login-buttons">
							<div class="login-button-wrapper">
								<a href="#login-with-email-link"
									class="btn btn-block btn-default btn-sm btn-login-option btn-login-with-email-link">
									{{ _("Login with Email Link") }}</a>
							</div>
						</div>
						{% endif %}
					</div>
				</div>
				{% else %}
					{{ email_login_body() }}
				{%- endif -%}
			</form>
		</div>
		{%- if not disable_signup and not disable_user_pass_login -%}
		<div class="text-center sign-up-message">
			{{ _("Don't have an account?") }}
			<a href="#signup">{{ _("Sign up") }}</a>
		</div>
		{%- endif -%}
	</section>

	{%- if social_login -%}
	<section class='for-email-login'>
		{{ logo_section() }}
		<div class="login-content page-card">
			<form class="form-signin form-login" role="form">
			{{ email_login_body() }}
			</form>
		</div>
		{%- if not disable_signup and not disable_user_pass_login -%}
		<div class="text-center sign-up-message">
			{{ _("Don't have an account?") }}
			<a href="#signup">{{ _("Sign up") }}</a>
		</div>
		{%- endif -%}
	</section>
	{%- endif -%}
	<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}'>
		{{ logo_section(_('Create a {0} Account').format(app_name or _("Frappe"))) }}
		<div class="login-content page-card">
			{%- if not disable_signup -%}
			{{ signup_form_template }}
			{%- else -%}
			<div class='page-card-head mb-2'>
				<span class='indicator gray'>{{_("Signup Disabled")}}</span>
				<p class="text-muted text-normal sign-up-message mt-1 mb-8">{{_("Signups have been disabled for this website.")}}</p>
				<div><a href='/' class='btn btn-primary btn-md'>{{ _("Home") }}</a></div>
			</div>
			{%- endif -%}
		</div>

	</section>

	<section class='for-forgot'>
		{{ logo_section('Forgot Password') }}
		<div class="login-content page-card">
			<form class="form-signin form-forgot hide" role="form">
				<div class="page-card-body">
					<div class="email-field">
						<input type="email" id="forgot_email" class="form-control"
							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
							<path
								d="M17.5 7.57572V5.53026C17.5 5.1686 17.3563 4.82176 17.1006 4.56603C16.8449 4.31029 16.498 4.16663 16.1364 4.16663H3.86364C3.50198 4.16663 3.15513 4.31029 2.8994 4.56603C2.64367 4.82176 2.5 5.1686 2.5 5.53026V7.57572L10 10.8333L17.5 7.57572Z"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
						</svg>

					</div>
				</div>
				<div class="page-card-actions">
					<button class="btn btn-sm btn-primary btn-block btn-forgot"
						type="submit">{{ _("Reset Password") }}</button>
					<p class="text-center sign-up-message">
						<a href="#login">{{ _("Back to Login") }}</a>
					</p>
				</div>

			</form>
		</div>
	</section>

	<section class='for-login-with-email-link'>
			{{ logo_section(_('Login with Email Link')) }}
		<div class="login-content page-card">
			<form class="form-signin form-login-with-email-link hide" role="form">
				<div class="page-card-body">
					<div class="email-field">
						<input type="email" id="login_with_email_link_email" class="form-control"
							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
							<path
								d="M17.5 7.57572V5.53026C17.5 5.1686 17.3563 4.82176 17.1006 4.56603C16.8449 4.31029 16.498 4.16663 16.1364 4.16663H3.86364C3.50198 4.16663 3.15513 4.31029 2.8994 4.56603C2.64367 4.82176 2.5 5.1686 2.5 5.53026V7.57572L10 10.8333L17.5 7.57572Z"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
						</svg>
					</div>
				</div>
				<div class="page-card-actions">
					<button class="btn btn-sm btn-primary btn-block btn-login-with-email-link"
						type="submit">{{ _("Send login link") }}</button>
					<p class="text-center sign-up-message">
						<a href="#login">{{ _("Back to Login") }}</a>
					</p>
				</div>
			</form>
		</div>
	</section>
</div>
{% endblock %}

{% block script %}
<script>{% include "templates/includes/login/login.js" %}</script>
{% endblock %}

{% block sidebar %}{% endblock %}
